<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLine3',
  props: {
    value: Array,
    text: String,
    subtext: String,
    max: Number,
    min: Number
  },
  watch: {
    'value':{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        this.changeChart()
      },
      deep:true
    }
  },
  mounted () {
    this.changeChart()
  },
  methods:{
    changeChart(){
      this.$nextTick(() => {
        let seriesData = this.value.map(_ => _.value)
        var data=this.value.map(_ => _.data);
        var bugArray1=[];
        var bugArray2=[];
        var title1='';
        var title2='';
        for(var i=0;i<data.length;i++){
          var array=data[i].map(_ => _.type);
           for(var j=0;j<data[i].length;j++){
            if(data[i][j].type=='1'){
              bugArray1.push(data[i][j].hour);
              title1=data[i][j].title
            }else{
              bugArray2.push(data[i][j].hour);
              title2=data[i][j].title
            }
          }
        }
        let xAxisData = this.value.map(_ => _.time)
        let option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '2%',
            top:'40px',
            width:'96%',
            height:'180px',
            containLabel:true,
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: [
            {
              type: 'value',
              show:false,
            },{
              type: 'value',
              min: this.min,
              max: this.max,
              position:'left',
            }
          ],
          series: [{
            name: '温度记录',
            data: seriesData,
            type: 'line',
            label: {
              normal: {
                  show: true,
                  position: 'top'
              }
            },
          },{
            name: title1,
            data: bugArray1,
            type: 'scatter',
            yAxisIndex:1,
          },
          {
            name: title2,
            data: bugArray2,
            type: 'scatter',
            yAxisIndex:1,
          }]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
}
</script>

<style lang="less">

</style>
